<template>
  <div class="file-system-directory-selector">
    <el-dialog
      v-model="visible"
      title="选择目录"
      width="500px"
    >
      <div class="content">
        <p>请选择本地目录：</p>
        
        <div class="file-input-container">
          <input
            ref="directoryInput"
            type="file"
            webkitdirectory
            directory
            @change="handleDirectorySelected"
            style="display: none"
          />
          <el-button type="primary" @click="openDirectoryDialog">
            <el-icon><folder-opened /></el-icon> 浏览文件系统
          </el-button>
          
          <div v-if="selectedDirectory" class="selected-directory">
            <p>已选择目录：</p>
            <el-input v-model="selectedDirectory" readonly />
          </div>
        </div>
        
        <div class="manual-input">
          <p>或手动输入目录路径：</p>
          <el-input 
            v-model="manualPath" 
            placeholder="例如：C:/Users/Documents/实验报告"
            clearable
          />
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { FolderOpened } from '@element-plus/icons-vue'

export default {
  name: 'FileSystemDirectorySelector',
  components: {
    FolderOpened
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    initialPath: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'select', 'cancel'],
  setup(props, { emit }) {
    console.log('FileSystemDirectorySelector setup, modelValue:', props.modelValue);
    
    const visible = ref(props.modelValue);
    const directoryInput = ref(null);
    const selectedDirectory = ref('');
    const manualPath = ref(props.initialPath || '');
    
    // 监听 modelValue 变化
    watch(() => props.modelValue, (newValue) => {
      console.log('FileSystemDirectorySelector: modelValue changed to', newValue);
      visible.value = newValue;
      
      // 初始化路径
      if (newValue && props.initialPath) {
        manualPath.value = props.initialPath;
      }
    });
    
    // 监听 visible 变化
    watch(visible, (newValue) => {
      console.log('FileSystemDirectorySelector: visible changed to', newValue);
      emit('update:modelValue', newValue);
    });
    
    // 打开目录选择对话框
    const openDirectoryDialog = () => {
      console.log('FileSystemDirectorySelector: 打开目录选择对话框');
      if (directoryInput.value) {
        directoryInput.value.click();
      }
    };
    
    // 处理目录选择
    const handleDirectorySelected = (event) => {
      console.log('FileSystemDirectorySelector: 目录选择事件', event);
      const files = event.target.files;
      
      if (files && files.length > 0) {
        // 获取第一个文件的路径，并提取目录路径
        const filePath = files[0].webkitRelativePath;
        const directoryPath = filePath.split('/')[0];
        
        console.log('FileSystemDirectorySelector: 选择的目录', directoryPath);
        selectedDirectory.value = directoryPath;
        manualPath.value = directoryPath;
      }
    };
    
    // 确认选择
    const handleConfirm = () => {
      console.log('FileSystemDirectorySelector: 确认选择', manualPath.value);
      if (!manualPath.value && !selectedDirectory.value) {
        ElMessage.warning('请选择或输入目录路径');
        return;
      }
      
      const path = manualPath.value || selectedDirectory.value;
      emit('select', path);
      visible.value = false;
    };
    
    // 取消选择
    const handleCancel = () => {
      console.log('FileSystemDirectorySelector: 取消选择');
      emit('cancel');
      visible.value = false;
    };
    
    return {
      visible,
      directoryInput,
      selectedDirectory,
      manualPath,
      openDirectoryDialog,
      handleDirectorySelected,
      handleConfirm,
      handleCancel
    };
  }
}
</script>

<style scoped>
.file-system-directory-selector {
  font-family: Arial, sans-serif;
}

.content {
  padding: 10px;
}

.file-input-container {
  margin: 20px 0;
}

.selected-directory {
  margin-top: 15px;
}

.manual-input {
  margin-top: 20px;
}
</style>
